<template>
    <div class="orderDetails">
        <span>买家信息</span>
        <div class="infor">
            <span>收货人姓名：{{orderDetailsData.receiveName}}</span>
            <span>联系电话：{{orderDetailsData.receivePhone}}</span>
            <span>自提点：{{orderDetailsData.siteName}}</span>
        </div>
        <div class="table-box">
            <el-table :data="orderDetailsData.products" border stripe style="width: 100%" :span-method="arraySpanMethod">
                <el-table-column  label="商户名称" >
                    <template slot-scope="scope">
                        <div class="productNameBox">
                            <div class="img-box">
                                <img :src="scope.row.image" alt="">
                            </div>
                            <div class="name">
                                <p>{{scope.row.productName}}</p>
                                <p>{{scope.row.skuName}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column  prop="originalPrice"  label="原价" width="80"></el-table-column>
                <el-table-column  prop="productPrice"  label="现价" width="80"></el-table-column>
                <el-table-column  prop="number"  label="数量" width="80"></el-table-column>
                <el-table-column  label="订单状态" width="100">
                    <template>
                        <div>
                            <p v-if="orderDetailsData.state==0">待付款</p>
                            <p v-if="orderDetailsData.state==1">未支付已自动取消订单</p>
                            <p v-if="orderDetailsData.state==2">商家已接单（显示配送时间）</p>
                            <p v-if="orderDetailsData.state==3">商家配送中</p>
                            <p v-if="orderDetailsData.state==4">商家已送达（代取货）</p>
                            <p v-if="orderDetailsData.state==5">待评价</p>
                            <p v-if="orderDetailsData.state==6">已完成</p>
                            <p v-if="orderDetailsData.state==7">退款中</p>
                            <p v-if="orderDetailsData.state==8">退款成功</p>
                            <p v-if="orderDetailsData.state==9">用户取消订单</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column  label="收货人信息">
                    <template>
                        <div>
                            <p>{{orderDetailsData.receiveName}}</p>
                            <p>{{orderDetailsData.receivePhone}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column  label="备注">
                    <template>
                        <div>
                            <p>{{orderDetailsData.remark}}</p>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="orderPrice">
            <div class="infor-bottom">
                <span>打包费￥{{orderDetailsData.packingPrice}} 元，</span>
                <span>配送费￥{{orderDetailsData.riderCommission}}  元</span>
            </div>
            <div>合计：￥<span style="font-size:30px;">{{orderDetailsData.orderPrice}}</span> 元</div>
        </div>
        <div class="orderTime">
            <p>订单编号： {{orderDetailsData.orderNo}}</p>
            <p>成交时间： {{orderDetailsData.receiveTime}}</p>
            <p>送达时间： {{orderDetailsData.signTime}}</p>
        </div>
        <div class="btn-box">
            <span class="my-btn my-back-blue" @click="prev">返回</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            id:'',
            orderDetailsData:'',
        }
    },
    mounted(){
        this.id=this.$route.params.id
        this.getOrderDetailsData()
    },
    methods:{
        prev() {
            this.$router.go(-1)
        },
        //获取数据
        getOrderDetailsData(){
            var param={"orderId": this.id,}
            this.axios({
                url:'/order/getOrder',
                method:'post',
                data:JSON.stringify(param),
            }).then(res=>{
                this.orderDetailsData=res.data.data
            })
        },
         //合并单元格
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 4||columnIndex === 5||columnIndex === 6||columnIndex === 7) {
                if (rowIndex === 0) {
                    return {rowspan: 10,colspan: 1};
                } else {
                    return {rowspan: 0,colspan: 0};
                }
            }
        }
    },
    watch:{
        
    }
}
</script>

<style scoped>
.orderDetails{
    padding-top: 28px;
}
.infor{
    padding: 20px 0;
}
.infor span{
    padding-right: 80px;
}
.infor-bottom{
    padding: 20px 0;
}
/* 表格 */
.table-box{
    margin-top: 40px;
}
.img-box{
    width: 70px;
    height: 70px;
    /* background: #eee; */
    position: relative;
    overflow: hidden;
    margin-right: 8px;
}
.img-box img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.productNameBox{
    display: flex;
    justify-content: space-between;
}
.productNameBox .name{
    text-align: center;
    width: calc( 100% - 78px);
}
.productNameBox .name p:first-child{
    height: 40px;
    line-height: 40px;
}
.productNameBox .name p:last-child{
    color: #aaa;
    font-size: 12px;
}
.orderPrice{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.orderTime{
    padding-top: 10px;
}
.orderTime p{
    color: #444;
    padding: 4px 0;
}
.btn-box{
    margin-top: 30px;
}
</style>